{template common/header}
<div class="container">
	<div class="starindex-header">
		<div class="span9">
			<img src="{baseurl}themes/puzzing/img/staruser_hd.gif"/>
		</div>
		<div class="span3 ml0" style="line-height: 150px;">
			<a href="{url home/store?act=create}" class="apply-button ml10"><span>{lang apply_to_stay}</span></a>
		</div>
	</div>
</div> 
<div class="container store-list">
<ul class="index-item">
{loop $storecates $storecate}
	<li>
		<div class="index-item-mod">
			<div class="index-item-hd clearall"><h3 class="item-type"><a href="{url store/topics?cid=$storecate['category_id']}">$storecate['category_name']</a></h3><span>{lang already_have}<em>$storecate['storenum']</em>{lang store_stay}</span> </div>
			<div class="index-item-bd clearall">
				<div class="item-slide {if $storecate['topicnum']>0}slide-next{/if}">
					<a class="prev" title="prev" href="javascript:;"><span>Prev</span></a> <a class="next" title="Next" href="javascript:;"><span>Next</span></a> 
				</div>
				<div class="item-img slide-img ">
					<ul data-num="1" style="width: 1900px;">
						{loop $storecate['topicsTop'] $topic}
						<li><a href="{url topic/show?topicid=$topic['topic_id']}" target="_blank"><img title="$topic['topic_title']" alt="$topic['topic_title']" src="$topic['bannercrop']" onerror="javascript:this.src = base_url + 'assets/img/default_topic_banner.jpg';" width="430" height="200"> <strong>$topic['topic_title']</strong> <span>{echo sysSubStr($topic['topic_desc'],20,true)}</span><span class="bg-black"></span> </a></li>
						{/loop}
					</ul>
				</div>
			</div>
			<div class="index-item-ft">
				{loop $storecate['topicsNormal'] $normal}
				<a title="$normal['topic_title']" href="{url topic/show?topicid=$normal['topic_id']}" target="_blank" ttname="haodian_index_hug">$normal['topic_title']</a>
 				{/loop}
 			</div>
 		</div>
	</li>
{/loop}
</ul>
</div>

<script type="text/javascript">
$(document).ready(function() {
		$(".slide-img").each(function(){
			var liSize = $(this).find("li").size();
			var width = 440;
			if($(this).hasClass("new-item-img"))
				width = 142;
			$(this).find("ul").css({"width":liSize*width+"px"});
		});
		
		$(".item-img a").hover(function(){
			$(this).parents(".item-img").siblings(".item-slide").addClass("item-slide-on");
		},function(){
			$(this).parents(".item-img").siblings(".item-slide").removeClass("item-slide-on");
		})
		
		$(".item-slide a").hover(function(){
			$(this).parent().addClass("item-slide-on");
		},function(){
			$(this).parent().removeClass("item-slide-on");
		});
		
		$(".item-slide a").click(function(){
			var cont = $(this).parents().siblings(".slide-img").find("ul"),
				num = parseInt(cont.attr("data-num")),size = cont.find("li").size(),
				w = 440;
				console.log(size);
				if($(this).hasClass("next")){ 
					if(num == size-1){
						cont.css({"margin-left":-(num*w)+"px"});
						$(this).parent().removeClass("slide-next");
						$(this).parent().addClass("slide-prev");
						cont.attr("data-num",num+1); 
					}else{ 
						cont.css({"margin-left":-(num*w)+"px"});
						$(this).parent().addClass("slide-prev");
						cont.attr("data-num",num+1);
					}
				}else{
					if(num == 2){
						$(this).parent().removeClass("slide-prev");
						cont.css({"margin-left":"0px"});
						$(this).parent().addClass("slide-next");
						cont.attr("data-num",num-1);
					}else{
						cont.css({"margin-left":-(num-2)*w+"px"});
						$(this).parent().addClass("slide-next");
						cont.attr("data-num",num-1);
					}
				}
			
		});
});
</script>
{template common/footer}
